<template>
    <div>
        <div class="d-flex">
            <edit-tree
                v-model="currentCategory"
                apiPrefix="/manager/device-category"
                :newFields="categoryFields"
                class="tree mr-4"
                @currentChange="selectCategory"
                title="分类"
            ></edit-tree>

            <entity-manager
                apiPrefix="/manager/device"
                :fields="fields"
                :queryFields="queryFields"
                ref="entityManagerRef"
                class="flex-auto"
                :params="params"
                operationsWidth="200px"
            >
                <template #rowButtons="{ row }">
                    <el-link type="danger" v-show="row.status == 1 || row.status == 2" class="mr-2" @click="offline(row)" v-perm="'update'">下线</el-link>
                    <el-link type="success" v-show="row.status == 0 || row.status == 3 || row.status == 2" class="mr-2" @click="publish(row)" v-perm="'update'"
                        >发布</el-link
                    >
                    <el-link type="primary" v-show="!row.isSuperAdmin" @click="goEdit(row)" class="mr-2" v-perm="'update'">编辑</el-link>
                    <el-link type="primary" @click="goData(row)" class="mr-2">工况</el-link>
                    <el-link type="danger" v-show="!row.isSuperAdmin" @click="doDelete(row)" class="mr-2" v-perm="'delete'">删除</el-link>
                </template>
            </entity-manager>
        </div>

        <full-panel v-model="visible" title="设备工况" @close="visible = false" v-if="visible">
            <device-data :device="currentDevice" />
        </full-panel>
    </div>
</template>

<script setup>
import fullPanel from "@/components/full-panel.vue";
import deviceData from "./device-data.vue";
import EditTree from "@/components/edit-tree/index.vue";
import { ElMessage } from "element-plus";
import * as _ from "lodash";
import https from "@/utils/https";

const categoryFields = [{ label: "分类名称", prop: "name", required: true }];
const fields = [
    { label: "所属网关", prop: "gatewayId", required: true, width: "200px", type: "select", options: loadGateways, converter: (val, row) => row.gatewayName },
    { label: "模型", prop: "modelId", required: true, width: "200px", type: "select", options: loadModels, converter: (val, row) => row.modelName },
    {
        label: "设备分类",
        prop: "categoryId",
        required: true,
        width: "200px",
        type: "treeSelect",
        options: loadCategory,
        converter: (val, row) => row.categoryName,
    },
    { label: "设备编号", prop: "code", required: true, unique: true, width: "200px" },
    { label: "设备名称", prop: "name", required: true },
    {
        label: "设备状态",
        prop: "status",
        width: "80px",
        align: "center",
        converter: (val) => {
            if (!val) {
                return "草稿";
            } else if (val == 1) {
                return "已发布";
            } else if (val == 2) {
                return "编辑中";
            } else {
                return "已下线";
            }
        },
        needNew: false,
    },
    { label: "在线状态", prop: "online", width: "80px", converter: (val) => (!val || val == "false" ? "离线" : "在线"), needNew: false, align: "center" },
    { label: "创建时间", prop: "createTime", width: "200px", needNew: false },
];
const entityManagerRef = ref();
const params = ref({});
const queryFields = [{ label: "关键字", prop: "key" }];
const currentCategory = ref({});

function goEdit(row) {
    entityManagerRef.value.goEdit(row);
}

function doDelete(row) {
    entityManagerRef.value.doDelete(row);
}

function loadGateways() {
    return https.post("/manager/gateway/query");
}

function loadModels() {
    return https.post("/manager/device-model/query");
}

function loadCategory() {
    return https.get("/manager/device-category/tree");
}

function publish(row) {
    https.get("/manager/device/publish", { id: row.id }).then((resp) => {
        ElMessage.success("操作成功");
        row.status = 1;
    });
}

function offline(row) {
    https.get("/manager/device/offline", { id: row.id }).then((resp) => {
        ElMessage.success("操作成功");
        row.status = 3;
    });
}

function selectCategory(category) {
    params.value.categoryId = category.id;
    entityManagerRef.value.reload();
}

const currentDevice = ref();
const visible = ref(false);
function goData(row) {
    currentDevice.value = row;
    visible.value = true;
}
</script>

<style lang="scss" scoped>
.tree {
    width: 300px;
    height: calc(100vh - 80px);
}
</style>
